<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .hide {
            display: none !important;
        }

        .alert {
            width: 400px;
            height: 200px;
            padding: 0 10px;
            border: 1px solid #666;
            border-radius: 4px;
            font-size: 14px;
            background-color: #fff;
            position: fixed;
            left: 50%;
            top: 50%;
            z-index: 999;
            transform: translate(-50%, -50%);
            box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.4);
            display: flex;
            flex-direction: column;
        }

        .alert .alert-title {
            height: 40px;
            line-height: 40px;
        }

        .alert .alert-content {
            flex: 1;
        }

        .alert .alert-footer {
            height: 40px;
            line-height: 40px;
            text-align: right;
        }

        .alert .alert-footer .alert-confirm {
            padding: 3px 5px;
        }
    </style>
</head>

<body>
    <!-- <div class="alert">
        <div class="alert-title">提示:</div>
        <div class="alert-content">xxxx</div>
        <div class="alert-footer">
            <button class="alert-confirm">确认</button>
        </div>
    </div> -->
</body>
<script type="module">
    import {singleton} from "../js/tool.js";
    // alert(1111);

    function createAlert() {
        // this.alertContainer => 将数据存储到实例化对象上(后续可以继续使用)
        this.alertContainer = document.createElement("div");
        this.alertContainer.classList.add("alert");

        this.alertTitle = document.createElement("div");
        this.alertTitle.classList.add("alert-title");
        this.alertTitle.textContent = "提示:";
        this.alertContainer.appendChild(this.alertTitle);


        this.alertContent = document.createElement("div");
        this.alertContent.classList.add("alert-content");
        this.alertContent.textContent = "";
        this.alertContainer.appendChild(this.alertContent);

        // var => 局部变量 -> 仅当前函数优先
        var alertFooter = document.createElement("div");
        alertFooter.classList.add("alert-footer");

        this.alertConfirm = document.createElement("button");
        this.alertConfirm.classList.add("alert-confirm");
        this.alertConfirm.textContent = "确定";
        alertFooter.appendChild(this.alertConfirm);

        this.alertContainer.appendChild(alertFooter);


        document.body.appendChild(this.alertContainer);
    }


    createAlert.prototype.init = function (options = {}) { // options = {title,content,confirmBtn:"",offset:[]}
        // this -> 调用此方法的实例化对象
        this.alertContainer.classList.remove("hide");
        this.setOptions(options);
        this.bindEvent();
    }

    createAlert.prototype.setOptions = function(options){
        // 配置alert框的内容
        var { title = "提示", content = "", confirmBtn = "确认" } = options;
        this.alertTitle.textContent = title;
        this.alertContent.textContent = content;
        this.alertConfirm.textContent = confirmBtn;
    }

    createAlert.prototype.bindEvent = function(){
        var _this = this;
        this.alertConfirm.onclick = function(){
            _this.alertContainer.classList.add("hide");
        }
    }

    // 普通构造函数 => 每次new 都会创建新的
    /* var res = new createAlert();
    res.init({
        title:"警告",
        content:"输入内容不合法!",
        confirmBtn:"ok"
    })
    console.log(res);

    var res = new createAlert();
    res.init({
        title:"警告",
        content:"输入内容不合法!",
        confirmBtn:"ok"
    })
    console.log(res);

    var res = new createAlert();
    res.init({
        title:"警告",
        content:"输入内容不合法!",
        confirmBtn:"ok"
    })
    console.log(res);

    var res = new createAlert();
    res.init({
        title:"警告",
        content:"输入内容不合法!",
        confirmBtn:"ok"
    })
    console.log(res); */

    // 单例模式 
    var myAlert = singleton(createAlert);  // 返回新函数
    console.log(myAlert);

    myAlert().init({
        title:"你好!",
        content:"这是单例模式弹框",
    })
    

    myAlert().init({
        title:"hello!",
        content:"This is a singleton alert demo",
        confirmBtn:"ok"
    })

</script>

</html>